<template>
   <div style="background-color:white;" class="nav">
        <ul>
          <router-link tag="li" :to="'/shopkind/'+item.id" v-for="item of kindlist" :key="item.id" >
            <img :src="item.icon" alt="">
            <p>{{ item.name }}</p>
          </router-link>
        </ul>
      </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      kindlist: []
    }
  },
  mounted () {
    axios.get('http://rap2.taobao.org:38080/app/mock/252928/typeList').then(res => {
      console.log(res.data.data)
      this.kindlist = res.data.data
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.nav{
@include rect(100%, auto);
ul{
  @include flexbox();
  li{
    @include flex();
    @include flexbox();
    @include rect(100%, auto);
    @include flex-direction(column);
    @include justify-content();
    @include align-items();
    p{
      font-size: 10px;
      margin-top: 4px;
    }
  }
}
}
</style>
